<template>
  <div class="main">
    <transition name="el-zoom-in-center">
      <div class="login" v-show="flag == 1">
        <h2>Joydio后台管理系统</h2>
        <hr />
        <el-form
          :model="ruleForm"
          status-icon
          ref="ruleForm"
          label-width="70px"
        >
          <el-form-item label="用户名" prop="username">
            <el-input
              type="text"
              v-model.number="ruleForm.username"
              @keyup.native.enter="submitForm"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              v-model="ruleForm.password"
              autocomplete="off"
              @keyup.native.enter="submitForm"
            ></el-input>
          </el-form-item>
          <el-button type="primary" @click="submitForm()">登录</el-button>
        </el-form>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: 0,
      ruleForm: {
        password: "",
        username: "",
      },
    };
  },
  mounted() {
    setTimeout(() => {
      this.flag = 1;
    }, 500);
  },
  methods: {
    submitForm() {
      this.$router.push("/home");
      // this.$axios
      //   .get(`/users/userName/${this.ruleForm.username}`)
      //   .then((res) => {
      //     if (
      //       res.data.length == 1 &&
      //       res.data[0].password === this.ruleForm.password
      //     ) {
      //       let cookies = this.$cookies.keys();
      //       if (cookies) {
      //         for (let i = 0; i < this.$cookies.keys().length; i++) {
      //           this.$cookies.remove(cookies[i]);
      //         }
      //       }
      //       this.$cookies.set("cookie", {
      //         id: res.data[0].userId,
      //         name: res.data[0].username,
      //         password: res.data[0].password,
      //         photo: res.data[0].photo,
      //       });
      //       this.$router.push("/home");
      //     } else {
      //       this.$message.error("用户名或者密码错误");
      //     }
      //   })
      //   .catch((err) => {
      //     console.log(err);
      //   });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped lang="less">
div.login {
  color: white;
  width: 600px;
  height: 50%;
  border-radius: 10px;
  font-weight: 600;
  text-align: center;
  backdrop-filter: blur(10px);
  background-color: #00bcff50;
}

div .el-form {
  width: 70%;
  margin: 0 auto;
  margin-top: 50px;
  padding-bottom: 10px;
  padding-bottom: 20px;
}

div .el-form .el-button {
  width: 100%;
  margin: 20px auto;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 1rem;
}

div.main {
  background: url("../assets/images/bg.png") no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-size: cover;
}
/deep/ .el-form-item__label {
  color: white;
}
</style>
